<script setup>
import { ref, computed } from 'vue'
</script>
<template>
  <div class="card">
    <CommonTitle title="监测设备" />
    <div class="flytime">
      <p>
        <span>监视目标数</span>
        <span>/条</span>
      </p>
      <p>
        <NumberAnimate :count="10"></NumberAnimate>
      </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  padding: 10px 0 10px 10px;

  .flytime {
    margin-top: 10px;
    width: 100%;
    height: 43px;
    background: url('@img/overview/fly_servertime_bg.png');
    background-size: 100% 100%;
    display: flex;
    align-items: center;

    p:first-child {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 5px 0 5px 30px;

      span:last-child {
        color: #2f9cff;
      }
    }

    p:last-child {
      flex: 1;
      text-align: center;
      font-size: 28px;
      background: linear-gradient(to bottom, #ffffff 0%, #00d5ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
